<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button icon="el-icon-plus" type="primary" @click="onNew"
          >新增</el-button
        >
      </div>

      <el-table
        ref="table"
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        :data="list"
        height="calc(100% - 190px)"
        style="width: 100%"
      >
        <el-table-column align="center" width="50">
          <template #header>
            <div class="filter-icon" title="筛选">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column label="申领单编号">
          <el-table-column prop="num">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.num"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              <el-link
                size="mini"
                type="primary"
                @click="handleView(scope.row)"
              >
                {{ scope.row.num }}</el-link
              >
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="申领类型">
          <el-table-column prop="requisitionTypeName">
            <template #header>
              <el-select
                ref="select"
                v-model="queryForm.requisitionTypeCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in requisitionTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="物料名称">
          <el-table-column prop="materialName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.materialName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.materialName"
                placement="top"
              >
                <div class="ellipsis-text">{{ scope.row.materialName }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="是否需要归还">
          <el-table-column prop="whetherReturnName">
            <template #header>
              <el-select
                ref="select"
                v-model="queryForm.whetherReturnCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in whetherReturnList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="申领人">
          <el-table-column prop="requisitionPeopleName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.requisitionPeopleName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="申请时间">
          <el-table-column prop="requisitionTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.requisitionTimeList"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </template>
            <template slot-scope="scope">
              {{ formatTime(scope.row.requisitionTime) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="出库时间">
          <el-table-column prop="outTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.outTimeList"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </template>
            <template slot-scope="scope">
              {{ formatTime(scope.row.outTime) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="入库时间">
          <el-table-column prop="inTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.inTimeList"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </template>
            <template slot-scope="scope">
              {{ formatTime(scope.row.inTime) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="状态">
          <el-table-column prop="stateName">
            <template #header>
              <el-select
                ref="select"
                v-model="queryForm.stateCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in requisitionFormStateCodeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <span :style="stateNameStyle(scope.row)">{{
                scope.row.stateName
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作">
          <el-table-column width="140">
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="onQuery">搜索</el-link>
                <el-link @click="cancelForm">清空</el-link>
              </div>
            </template>

            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link
                  v-if="scope.row.stateCode == 400"
                  size="mini"
                  type="primary"
                  @click="handleHandle(scope.row)"
                  >处理</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <MaterialRequisitionFormViewDialog
      v-if="dialogFormViewVisible"
      :id.sync="id"
      ref="MaterialRequisitionFormViewDialog"
      :edit-state.sync="editState"
      :read-only.sync="readOnly"
      :dialog-form-visible.sync="dialogFormViewVisible"
      @close="getList"
    />
    <MaterialRequisitionFormEdit
      v-if="dialogFormVisible"
      ref="MaterialRequisitionFormEdit"
      :dialog-form-visible.sync="dialogFormVisible"
      @close="getList"
    />
  </div>
</template>

<script>
import MaterialRequisitionFormViewDialog from "./MaterialRequisitionFormViewDialog.vue";
import { getList } from "../../../api/Material/MaterialRequisitionForm.js";
import { deepClone } from "@/utils";
import MaterialRequisitionFormEdit from "./MaterialRequisitionFormEdit.vue";
import {
  requisitionType,
  whetherReturn,
  requisitionFormStateCode,
} from "../../../utils/const";
import { formatTime } from "../../../utils/time";
export default {
  name: "MaterialRequisitionFormList",
  components: {
    MaterialRequisitionFormEdit,
    MaterialRequisitionFormViewDialog,
  },
  data() {
    return {
      readOnly: false,
      loading: true,
      editState: false,
      showFilterRow: false,
      dialogFormVisible: false,
      dialogFormViewVisible: false,
      formatTime,
      requisitionType,
      whetherReturn,
      requisitionFormStateCode,
      requisitionTypeList: [],
      whetherReturnList: [],
      requisitionFormStateCodeList: [],
      list: [],
      id: "",
      queryForm: {
        num: "",
        requisitionTypeCode: "0",
        materialName: "",
        whetherReturnCode: "-1",
        requisitionPeopleName: "",
        requisitionTimeList: [],
        requisitionTimeStart: null,
        requisitionTimeEnd: null,
        outTimeList: [],
        outTimeStart: null,
        outTimeEnd: null,
        inTimeList: [],
        inTimeStart: null,
        inTimeEnd: null,
        stateCode: "0",
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getList();
    this.requisitionTypeList = deepClone(this.requisitionType);
    this.requisitionTypeList.unshift({ value: "0", name: "全部" });
    this.whetherReturnList = deepClone(this.whetherReturn);
    this.whetherReturnList.unshift({ value: "-1", name: "全部" });
    this.requisitionFormStateCodeList = deepClone(
      this.requisitionFormStateCode
    );
    this.requisitionFormStateCodeList.unshift({ value: "0", name: "全部" });
  },
  methods: {
    stateNameStyle(row) {
      if (row.stateCode === 300 || row.stateCode === 500) {
        return "color: #1890ff";
      }
    },
    handleView(row) {
      this.id = row.id;
      this.readOnly = true;
      this.dialogFormViewVisible = true;
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.dialogFormVisible = true;
    },
    handleHandle(rowData) {
      this.id = rowData.id;
      this.editState = true;
      this.readOnly = false;
      this.dialogFormViewVisible = true;
    },
    onQuery() {
      this.queryForm.requisitionTimeStart = null;
      this.queryForm.requisitionTimeEnd = null;
      this.queryForm.outTimeStart = null;
      this.queryForm.outTimeEnd = null;
      this.queryForm.inTimeStart = null;
      this.queryForm.inTimeEnd = null;
      if (
        this.queryForm.requisitionTimeList !== null &&
        this.queryForm.requisitionTimeList.length !== 0
      ) {
        this.queryForm.requisitionTimeStart =
          this.queryForm.requisitionTimeList[0] + " 00:00:00";
        this.queryForm.requisitionTimeEnd =
          this.queryForm.requisitionTimeList[1] + " 23:59:59";
      }
      if (
        this.queryForm.outTimeList !== null &&
        this.queryForm.outTimeList.length !== 0
      ) {
        this.queryForm.outTimeStart =
          this.queryForm.outTimeList[0] + " 00:00:00";
        this.queryForm.outTimeEnd = this.queryForm.outTimeList[1] + " 23:59:59";
      }
      if (
        this.queryForm.inTimeList !== null &&
        this.queryForm.inTimeList.length !== 0
      ) {
        this.queryForm.inTimeStart = this.queryForm.inTimeList[0] + " 00:00:00";
        this.queryForm.inTimeEnd = this.queryForm.inTimeList[1] + " 23:59:59";
      }
      this.pagination.pageIndex = 1;

      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.ellipsis-text {
  width: 150px; /* 设置宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
